// 获取元素
let token = localStorage.token;
let delManageEl = document.querySelector('.del_manage');
let priceTotal = document.querySelector('.priceTotal');
let choiceList = document.querySelectorAll(".choice");
let payBtn = document.querySelector('.pay');
let delBtn = document.querySelector('.del');
let noGoods = document.querySelector('.no_goods');
let container = document.querySelector('.container');
let choiceAllEl = document.querySelector(".all");
let payBox = document.querySelector('.pay_box');
let delBox = document.querySelector('.del_box');
// let goodsSelfNum = document.querySelector('.num')
let isDelate = false;
let username = localStorage.username;
async function text(){
    try {
        let res = await axios({
            method: 'post',
            url: 'http://localhost:9527/api/carts/getCart',
            data: {
                username,
            },
            headers: {
                'Authorization': 'Bearer ' + token
            }
        })
    } catch (error) {
        if (error.response.status == 401) {
            // 鉴权失败
            alert('用户未登录，请登录后进行访问')
            let timer = setTimeout(() => {
                location.href = "../../html/LXW/login.html"
            })
        }
    }
}
text()
let res = axios({
    method: 'post',
    url: 'http://localhost:9527/api/carts/getCart',
    data: {
        username,
    },
    headers: {
        'Authorization': 'Bearer ' + token
    }
}).then((response) => {
    console.log(response);
    let carData = response.data.data

    if (carData) {
        noGoods.style.display = "none"
    } else {
        noGoods.style.display = "flex"
    }
    let clothesNum = 0;
    let bagNum = 0;
    let DigitalNum = 0;
    let LipstickNum = 0;
    let shoesNum = 0;
    let trousersNum = 0;
    let watchesNum = 0;

    for (e in carData) {
        let {
            cartType,
            _id
        } = carData[e]

        console.log(cartType);
        // 包包：bag;衣服：clothes;数码：Digital;口红：Lipstick;鞋子：shoes;裤子：trousers;手表：watches；
        if (cartType === 'clothes') {
            clothesNum++;
            let {
                username,
                cartName,
                cartDes,
                cartImg,
                cartType,
                cartPrice,
                cartSpc,
                cartNum,
            } = carData[e]
            let cartSpcArr = cartSpc.split(',');
            if (clothesNum == 1) {
                let goodsTypeList = document.createElement('ul');
                goodsTypeList.classList.add('goods_list')
                goodsTypeList.classList.add('clothes')
                goodsTypeList.innerHTML = `
                        <div class="goods_type ">
                            <input class="choice type_checkbox" type="checkbox"></input>
                            <span>衣服</span>
                        </div>
                        <li class="goods" data-name="${cartName}" data-id="${_id}">
                            <input class="choice goods_checkbox" type="checkbox"></input>
                            <a href="#"><img src="${cartImg}" alt=""></a>
                            <div class="goods_des">
                                <div class="goods_tk">
                                    <a href="#">
                                        <p>${cartDes}</p>
                                    </a>
                                    <div class="goods_kind">${cartSpcArr[0]}</div>
                                </div>
                                <div class="goods_pn">
                                    <div class="price">￥<span>${cartPrice}</span></div>
                                    <div class="goods_num">
                                        <div class="subtract">-</div>
                                        <input class="num" type="text" value="${cartNum}">
                                        <div class="add">+</div>
                                    </div>
                                </div>
                            </div>
                        </li> 
                `
                container.appendChild(goodsTypeList)
            } else {
                let goodsTypeList = document.querySelector('.clothes')
                let goods = document.createElement('li');
                goods.classList.add('goods')
                goods.dataset.name = cartName
                goods.dataset.id = _id
                goods.innerHTML = `
                    <input class="choice goods_checkbox" type="checkbox"></input>
                    <a href="#"><img src="${cartImg}" alt=""></a>
                    <div class="goods_des">
                        <div class="goods_tk">
                            <a href="#">
                                <p>${cartDes}</p>
                            </a>
                            <div class="goods_kind">${cartSpcArr[3]}</div>
                        </div>
                        <div class="goods_pn">
                            <div class="price">￥<span>${cartPrice}</span></div>
                            <div class="goods_num">
                                <div class="subtract">-</div>
                                <input class="num" type="text" value="${cartNum}">
                                <div class="add">+</div>
                            </div>
                        </div>
                    </div>
                `
                goodsTypeList.appendChild(goods)
            }
            
        }
        if (cartType == 'bag') {
            // console.log(carData[e]);
            bagNum++;
            let {
                username,
                cartName,
                cartDes,
                cartImg,
                cartType,
                cartPrice,
                cartSpc,
                cartNum,
            } = carData[e]
            let cartSpcArr = cartSpc.split(',');
            if (bagNum == 1) {
                let goodsTypeList = document.createElement('ul');
                goodsTypeList.classList.add('goods_list')
                goodsTypeList.classList.add('bag')
                goodsTypeList.innerHTML = `
                        <div class="goods_type">
                            <input class="choice type_checkbox" type="checkbox"></input>
                            <span>包包</span>
                        </div>
                        <li class="goods" data-name="${cartName}" data-id="${_id}">
                            <input class="choice goods_checkbox" type="checkbox"></input>
                            <a href="#"><img src="${cartImg}" alt=""></a>
                            <div class="goods_des">
                                <div class="goods_tk">
                                    <a href="#">
                                        <p>${cartDes}</p>
                                    </a>
                                    <div class="goods_kind">${cartSpcArr[0]}</div>
                                </div>
                                <div class="goods_pn">
                                    <div class="price">￥<span>${cartPrice}</span></div>
                                    <div class="goods_num">
                                        <div class="subtract">-</div>
                                        <input class="num" type="text" value="${cartNum}">
                                        <div class="add">+</div>
                                    </div>
                                </div>
                            </div>
                        </li> 
                `
                container.appendChild(goodsTypeList)
            } else {
                let goodsTypeList = document.querySelector('.bag')
                let goods = document.createElement('li');
                goods.classList.add('goods')
                goods.dataset.name = cartName
                goods.dataset.id = _id
                goods.innerHTML = `
                    <input class="choice goods_checkbox" type="checkbox"></input>
                    <a href="#"><img src="${cartImg}" alt=""></a>
                    <div class="goods_des">
                        <div class="goods_tk">
                            <a href="#">
                                <p>${cartDes}</p>
                            </a>
                            <div class="goods_kind">${cartSpcArr[3]}</div>
                        </div>
                        <div class="goods_pn">
                            <div class="price">￥<span>${cartPrice}</span></div>
                            <div class="goods_num">
                                <div class="subtract">-</div>
                                <input class="num" type="text" value="${cartNum}">
                                <div class="add">+</div>
                            </div>
                        </div>
                    </div>
                `
                goodsTypeList.appendChild(goods)
            }

        }
        if (cartType == 'Lipstick') {
            LipstickNum++;
            let {
                username,
                cartName,
                cartDes,
                cartImg,
                cartType,
                cartPrice,
                cartSpc,
                cartNum,
            } = carData[e]
            let cartSpcArr = cartSpc.split(',');
            if (LipstickNum == 1) {
                let goodsTypeList = document.createElement('ul');
                goodsTypeList.classList.add('goods_list')
                goodsTypeList.classList.add('Lipstick')
                goodsTypeList.innerHTML = `
                        <div class="goods_type">
                            <input class="choice type_checkbox" type="checkbox"></input>
                            <span>口红</span>
                        </div>
                        <li class="goods" data-name="${cartName}" data-id="${_id}">
                            <input class="choice goods_checkbox" type="checkbox"></input>
                            <a href="#"><img src="${cartImg}" alt=""></a>
                            <div class="goods_des">
                                <div class="goods_tk">
                                    <a href="#">
                                        <p>${cartDes}</p>
                                    </a>
                                    <div class="goods_kind">${cartSpcArr[0]}</div>
                                </div>
                                <div class="goods_pn">
                                    <div class="price">￥<span>${cartPrice}</span></div>
                                    <div class="goods_num">
                                        <div class="subtract">-</div>
                                        <input class="num" type="text" value="${cartNum}">
                                        <div class="add">+</div>
                                    </div>
                                </div>
                            </div>
                        </li> 
                `
                container.appendChild(goodsTypeList)
            } else {
                let goodsTypeList = document.querySelector('.Lipstick')
                let goods = document.createElement('li');
                goods.classList.add('goods')
                goods.dataset.name = cartName
                goods.dataset.id = _id
                goods.innerHTML = `
                    <input class="choice goods_checkbox" type="checkbox"></input>
                    <a href="#"><img src="${cartImg}" alt=""></a>
                    <div class="goods_des">
                        <div class="goods_tk">
                            <a href="#">
                                <p>${cartDes}</p>
                            </a>
                            <div class="goods_kind">${cartSpcArr[3]}</div>
                        </div>
                        <div class="goods_pn">
                            <div class="price">￥<span>${cartPrice}</span></div>
                            <div class="goods_num">
                                <div class="subtract">-</div>
                                <input class="num" type="text" value="${cartNum}">
                                <div class="add">+</div>
                            </div>
                        </div>
                    </div>
                `
                goodsTypeList.appendChild(goods)
            }

        }
        if (cartType == 'shoes') {
            shoesNum++;
            let {
                username,
                cartName,
                cartDes,
                cartImg,
                cartType,
                cartPrice,
                cartSpc,
                cartNum,
            } = carData[e]
            let cartSpcArr = cartSpc.split(',');
            if (shoesNum == 1) {
                let goodsTypeList = document.createElement('ul');
                goodsTypeList.classList.add('goods_list')
                goodsTypeList.classList.add('shoes')
                goodsTypeList.innerHTML = `
                        <div class="goods_type" >
                            <input class="choice type_checkbox" type="checkbox"></input>
                            <span>鞋子</span>
                        </div>
                        <li class="goods" data-name="${cartName}" data-id="${_id}">
                            <input class="choice goods_checkbox" type="checkbox"></input>
                            <a href="#"><img src="${cartImg}" alt=""></a>
                            <div class="goods_des">
                                <div class="goods_tk">
                                    <a href="#">
                                        <p>${cartDes}</p>
                                    </a>
                                    <div class="goods_kind">${cartSpcArr[0]}</div>
                                </div>
                                <div class="goods_pn">
                                    <div class="price">￥<span>${cartPrice}</span></div>
                                    <div class="goods_num">
                                        <div class="subtract">-</div>
                                        <input class="num" type="text" value="${cartNum}">
                                        <div class="add">+</div>
                                    </div>
                                </div>
                            </div>
                        </li> 
                `
                container.appendChild(goodsTypeList)
            } else {
                let goodsTypeList = document.querySelector('.shoes')
                let goods = document.createElement('li');
                goods.classList.add('goods')
                goods.dataset.name = cartName
                goods.dataset.id = _id
                goods.innerHTML = `
                    <input class="choice goods_checkbox" type="checkbox"></input>
                    <a href="#"><img src="${cartImg}" alt=""></a>
                    <div class="goods_des">
                        <div class="goods_tk">
                            <a href="#">
                                <p>${cartDes}</p>
                            </a>
                            <div class="goods_kind">${cartSpcArr[3]}</div>
                        </div>
                        <div class="goods_pn">
                            <div class="price">￥<span>${cartPrice}</span></div>
                            <div class="goods_num">
                                <div class="subtract">-</div>
                                <input class="num" type="text" value="${cartNum}">
                                <div class="add">+</div>
                            </div>
                        </div>
                    </div>
                `
                goodsTypeList.appendChild(goods)
            }

        }
        if (cartType == 'Digital') {
            DigitalNum++;
            let {
                username,
                cartName,
                cartDes,
                cartImg,
                cartType,
                cartPrice,
                cartSpc,
                cartNum,
            } = carData[e]
            let cartSpcArr = cartSpc.split(',');
            if (DigitalNum == 1) {
                let goodsTypeList = document.createElement('ul');
                goodsTypeList.classList.add('goods_list')
                goodsTypeList.classList.add('Digital')
                goodsTypeList.innerHTML = `
                        <div class="goods_type">
                            <input class="choice type_checkbox" type="checkbox"></input>
                            <span>数码产品</span>
                        </div>
                        <li class="goods" data-name="${cartName}" data-id="${_id}">
                            <input class="choice goods_checkbox" type="checkbox"></input>
                            <a href="#"><img src="${cartImg}" alt=""></a>
                            <div class="goods_des">
                                <div class="goods_tk">
                                    <a href="#">
                                        <p>${cartDes}</p>
                                    </a>
                                    <div class="goods_kind">${cartSpcArr[0]}</div>
                                </div>
                                <div class="goods_pn">
                                    <div class="price">￥<span>${cartPrice}</span></div>
                                    <div class="goods_num">
                                        <div class="subtract">-</div>
                                        <input class="num" type="text" value="${cartNum}">
                                        <div class="add">+</div>
                                    </div>
                                </div>
                            </div>
                        </li> 
                `
                container.appendChild(goodsTypeList)
            } else {
                let goodsTypeList = document.querySelector('.Digital')
                let goods = document.createElement('li');
                goods.classList.add('goods')
                goods.dataset.name = cartName
                goods.dataset.id = _id
                goods.innerHTML = `
                    <input class="choice goods_checkbox" type="checkbox"></input>
                    <a href="#"><img src="${cartImg}" alt=""></a>
                    <div class="goods_des">
                        <div class="goods_tk">
                            <a href="#">
                                <p>${cartDes}</p>
                            </a>
                            <div class="goods_kind">${cartSpcArr[3]}</div>
                        </div>
                        <div class="goods_pn">
                            <div class="price">￥<span>${cartPrice}</span></div>
                            <div class="goods_num">
                                <div class="subtract">-</div>
                                <input class="num" type="text" value="${cartNum}">
                                <div class="add">+</div>
                            </div>
                        </div>
                    </div>
                `
                goodsTypeList.appendChild(goods)
            }

        }
        if (cartType == 'watches') {
            watchesNum++;
            let {
                username,
                cartName,
                cartDes,
                cartImg,
                cartType,
                cartPrice,
                cartSpc,
                cartNum,
            } = carData[e]
            let cartSpcArr = cartSpc.split(',');
            if (watchesNum == 1) {
                let goodsTypeList = document.createElement('ul');
                goodsTypeList.classList.add('goods_list')
                goodsTypeList.classList.add('watches')
                goodsTypeList.innerHTML = `
                        <div class="goods_type">
                            <input class="choice type_checkbox" type="checkbox"></input>
                            <span>手表</span>
                        </div>
                        <li class="goods" data-name="${cartName}" data-id="${_id}">
                            <input class="choice goods_checkbox" type="checkbox"></input>
                            <a href="#"><img src="${cartImg}" alt=""></a>
                            <div class="goods_des">
                                <div class="goods_tk">
                                    <a href="#">
                                        <p>${cartDes}</p>
                                    </a>
                                    <div class="goods_kind">${cartSpcArr[0]}</div>
                                </div>
                                <div class="goods_pn">
                                    <div class="price">￥<span>${cartPrice}</span></div>
                                    <div class="goods_num">
                                        <div class="subtract">-</div>
                                        <input class="num" type="text" value="${cartNum}">
                                        <div class="add">+</div>
                                    </div>
                                </div>
                            </div>
                        </li> 
                `
                container.appendChild(goodsTypeList)
            } else {
                let goodsTypeList = document.querySelector('.watches')
                let goods = document.createElement('li');
                goods.classList.add('goods')
                goods.dataset.name = cartName
                goods.dataset.id = _id
                goods.innerHTML = `
                    <input class="choice goods_checkbox" type="checkbox"></input>
                    <a href="#"><img src="${cartImg}" alt=""></a>
                    <div class="goods_des">
                        <div class="goods_tk">
                            <a href="#">
                                <p>${cartDes}</p>
                            </a>
                            <div class="goods_kind">${cartSpcArr[3]}</div>
                        </div>
                        <div class="goods_pn">
                            <div class="price">￥<span>${cartPrice}</span></div>
                            <div class="goods_num">
                                <div class="subtract">-</div>
                                <input class="num" type="text" value="${cartNum}">
                                <div class="add">+</div>
                            </div>
                        </div>
                    </div>
                `
                goodsTypeList.appendChild(goods)
            }

        }
        if (cartType == 'trousers') {
            trousersNum++;
            let {
                username,
                cartName,
                cartDes,
                cartImg,
                cartType,
                cartPrice,
                cartSpc,
                cartNum,
            } = carData[e]
            let cartSpcArr = cartSpc.split(',');
            if (trousersNum == 1) {
                let goodsTypeList = document.createElement('ul');
                goodsTypeList.classList.add('goods_list')
                goodsTypeList.classList.add('trousers')
                goodsTypeList.innerHTML = `
                        <div class="goods_type">
                            <input class="choice type_checkbox" type="checkbox"></input>
                            <span>裤子</span>
                        </div>
                        <li class="goods" data-name="${cartName}" data-id="${_id}">
                            <input class="choice goods_checkbox" type="checkbox"></input>
                            <a href="#"><img src="${cartImg}" alt=""></a>
                            <div class="goods_des">
                                <div class="goods_tk">
                                    <a href="#">
                                        <p>${cartDes}</p>
                                    </a>
                                    <div class="goods_kind">${cartSpcArr[0]}</div>
                                </div>
                                <div class="goods_pn">
                                    <div class="price">￥<span>${cartPrice}</span></div>
                                    <div class="goods_num">
                                        <div class="subtract">-</div>
                                        <input class="num" type="text" value="${cartNum}">
                                        <div class="add">+</div>
                                    </div>
                                </div>
                            </div>
                        </li> 
                `
                container.appendChild(goodsTypeList)
            } else {
                let goodsTypeList = document.querySelector('.trousers')
                let goods = document.createElement('li');
                goods.classList.add('goods')
                goods.dataset.name = cartName
                goods.dataset.id = _id
                goods.innerHTML = `
                    <input class="choice goods_checkbox" type="checkbox"></input>
                    <a href="#"><img src="${cartImg}" alt=""></a>
                    <div class="goods_des">
                        <div class="goods_tk">
                            <a href="#">
                                <p>${cartDes}</p>
                            </a>
                            <div class="goods_kind">${cartSpcArr[3]}</div>
                        </div>
                        <div class="goods_pn">
                            <div class="price">￥<span>${cartPrice}</span></div>
                            <div class="goods_num">
                                <div class="subtract">-</div>
                                <input class="num" type="text" value="${cartNum}">
                                <div class="add">+</div>
                            </div>
                        </div>
                    </div>
                `
                goodsTypeList.appendChild(goods)
            }

        }

    }
    let idArr = []
    let nameArr = []
    let valueNum = []
    // 点击事件
    document.body.onclick = async function (e) {
        let targetEl = e.target;
        let typeList = targetEl.closest('.goods_list')

        if (targetEl.classList.contains('add')) {
            return changeNum(targetEl, 1)
        }
        if (targetEl.classList.contains('subtract')) {
            return changeNum(targetEl, -1)
        }
        // 判断商品选择
        if (targetEl.classList.contains('goods_checkbox')) {
            // let goodsTypeCheckbox = typeList.querySelector('.type_checkbox')
            let goodsCheckboxList = typeList.querySelectorAll('.goods_checkbox')
            let goodsTypeCheckboxList = document.querySelectorAll('.type_checkbox')
            let isAllChecked = Array.from(goodsTypeCheckboxList).every((el) => el.checked)
            let isAllTypeChecked = Array.from(goodsCheckboxList).every((el) => el.checked)
            typeList.querySelector('.type_checkbox').checked = isAllTypeChecked
            choiceAllEl.checked = isAllChecked

            return getGoodsNum()
        }
        if (targetEl.classList.contains('type_checkbox')) {
            let goodsTypeCheckboxList = document.querySelectorAll('.type_checkbox')
            let goodsCheckboxList = typeList.querySelectorAll('.goods_checkbox')
            let isAllChecked = Array.from(goodsTypeCheckboxList).every((el) => el.checked)
            goodsCheckboxList.forEach((el) => el.checked = targetEl.checked)
            choiceAllEl.checked = isAllChecked

            return getGoodsNum()
        }
        if (targetEl.classList.contains('all')) {
            let AllCheckbox = document.querySelectorAll('.choice')
            AllCheckbox.forEach((el) => el.checked = targetEl.checked)

            return getGoodsNum()
        }

        // 点击管理的情况
        if (targetEl.classList.contains('del_manage')) {
            // 将结算改为删除
            if (isDelate == false) {
                delManageEl.textContent = '完成';
                payBox.style.display = 'none';
                delBox.style.display = 'block'
                isDelate = true

            } else {
                delManageEl.textContent = '管理';
                payBox.style.display = 'flex';
                delBox.style.display = 'none';
                isDelate = false

            }
        }
        let goodsNum = 0;
        if (targetEl.classList.contains('del')) {
            let goodsCheckList = document.querySelectorAll('.goods_checkbox')
            goodsCheckList.forEach((e) => {
                goodsNum++
                if (e.checked == true) {
                    let singleGoods = e.closest('.goods')
                    idArr.push(singleGoods.dataset.id)
                    singleGoods.remove()
                }
            })
            let goodsTypeList = document.querySelectorAll('.goods_list')
            goodsTypeList.forEach((e) => {
                if (!e.querySelector('.goods')) {
                    e.remove()
                }
            })
            let timer = setTimeout(() => {
                if (goodsCheckList.length == goodsNum) {
                    choiceAllEl.checked = false
                    noGoods.style.display = "flex"
                } else {
                    noGoods.style.display = "none"
                }
            })
            priceTotal.textContent = '0.00'
            getGoodsNum();
            idArr = idArr.join(',')
            let content = await axios({
                method: 'post',
                url: 'http://localhost:9527/api/carts/deleteCart',
                data: {
                    '_id': idArr
                }
            })
        }
        if (targetEl.tagName == 'IMG') {
            let cartName = e.target.closest('.goods').dataset.name
            localStorage.setItem("cartName", cartName)
            let timer = setTimeout(() => {
                location.href = "../WXL/shop.html"
            })
        }

        if (targetEl.classList.contains('pay')) {
            let goodsCheckList = document.querySelectorAll('.goods_checkbox')
            goodsCheckList.forEach((e) => {
                if (e.checked) {
                    valueNum.push(e.closest('.goods').querySelector('.goods_num input').value)
                    nameArr.push(e.closest('.goods').dataset.name)
                    localStorage.setItem("valueNum", valueNum)
                    localStorage.setItem("cartName", nameArr)
                    location.href = '../../html/WXL/dindan.html'
                }

            })
        }
    }
    // 点击加号触发事件
    function addGoodsNum(el) {
        let goodsEl = el.closest('.goods')
        let goodsSelfNum = document.querySelector('.num')
        let num = +goodsSelfNum.value
        if (num + 1) {
            goodsSelfNum.value = num + 1
        }
    }
    // 点击减号触发事件
    function subGoodsNum(el) {
        let goodsEl = el.closest('.goods')
        let num = +goodsSelfNum.value
        if (num - 1 > 0) {
            goodsSelfNum.value = num - 1
        }
    }

    function changeNum(el, change) {
        let goodsEl = el.closest('.goods')
        let goodsSelfNum = goodsEl.querySelector('.num')
        let num = +goodsSelfNum.value

        if (num + change > 0) {
            goodsSelfNum.value = num + change
        }
        if (num + change <= 1) {
            el.style.cursor = "not-allowed"
        } else {
            el.style.cursor = "pointer"
        }
        getGoodsNum()
    }

    function getGoodsNum() {
        let totalPrice = 0
        let goodsList = document.querySelectorAll('.goods');
        goodsList.forEach((el) => {
            let goodsNum = +(el.querySelector('.num').value)
            let goodsCheckbox = el.querySelector('.goods_checkbox')
            let goodsSelfPrice = (el.querySelector('.price span').textContent) * goodsNum

            if (goodsCheckbox.checked) {
                totalPrice += goodsSelfPrice
            }
            priceTotal.textContent = totalPrice.toFixed(2)
        })
    }
})

// 商品数据

// let del=document.querySelector('.del');
// del.onclick=function(){
// }